<template>
	<u-popup mode="bottom" v-model="show">
		<view class="flex-col section_3">
			<view class="flex-col items-center">
				<text class="text_10">应支付</text>
				<view class="group_12">
					<text class="text_11">￥</text>
					<text class="text_12">{{money}}</text>
				</view>
			</view>
			<view class="flex-col group_13">
				<view class="top-group flex-col view_5" :class="{ active: payType == 0 }" @click="itemOnClick(0)">
					<view class="section_5"></view>
					<image src="/static/img/47.png" class="image_19" />
					<text class="text_13">余额支付</text>
					<image src="/static/img/27.png" class="image_17" v-if="payType == 0" />
					<image src="/static/img/28.png" class="image_17" v-else />
				</view>
				<view class="top-group flex-col view_4" :class="{ active: payType == 1 }" @click="itemOnClick(1)">
					<view class="section_4"></view>
					<image src="/static/img/36.png" class="image_16" />
					<text class="text_13">微信支付</text>
					<image src="/static/img/27.png" class="image_17" v-if="payType == 1" />
					<image src="/static/img/28.png" class="image_17" v-else />
				</view>
				
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	props:{
		money:""
	},
	data() {
		return {
			show: false,
			payType: 0
		};
	},
	methods:{
		open(){
			this.show=true;
		},
		itemOnClick(index){
			this.$emit('click',{type:index});
		}
	}
};
</script>

<style>
.top-group {
	position: relative;
}
.text_13 {
	position: absolute;
	left: 91rpx;
	top: 50%;
	transform: translateY(-50%);
}
.image_17 {
	width: 30rpx;
	height: 30rpx;
	position: absolute;
	left: 551rpx;
	top: 50%;
	transform: translateY(-50%);
}
.section_3 {
	padding: 68rpx 63rpx 50rpx 64rpx;
	background-color: rgb(255, 255, 255);
}
.group_13 {
	margin-top: 36rpx;
}
.text_10 {
	color: rgb(51, 51, 51);
	font-size: 26rpx;
}
.group_12 {
	margin-top: 19rpx;
}
.view_4 {
	font-size: 26rpx;
	border-width: 2rpx;
	border-style: solid;
	border-color: rgb(220, 220, 220);
	border-radius: 42rpx;
	margin-top: 36rpx;
}

.view_5 {
	margin-top: 26rpx;
	font-size: 26rpx;
	border-width: 2rpx;
	border-style: solid;
	border-color: rgb(220, 220, 220);
	border-radius: 42rpx;
}
.active {
	opacity: 0.5;
	color: rgb(9, 187, 7);
	border-color:rgb(0, 137, 255) !important;
	
}
.text_11 {
	color: rgb(255, 92, 92);
	font-size: 34rpx;
}
.text_12 {
	color: rgb(255, 92, 92);
	font-size: 46rpx;
	font-weight: 700;
}
.section_4 {
	opacity: 0.5;
	border-radius: 42rpx;
	height: 84rpx;
	/* border: solid 2rpx rgb(220, 220, 220); */
}
.image_16 {
	width: 38rpx;
	height: 33rpx;
	position: absolute;
	left: 34rpx;
	top: 50%;
	transform: translateY(-50%);
}
.section_5 {
	opacity: 0.5;
	border-radius: 42rpx;
	height: 84rpx;
	/* border: solid 2rpx rgb(220, 220, 220); */
}
.image_19 {
	width: 38rpx;
	height: 38rpx;
	position: absolute;
	left: 34rpx;
	top: 50%;
	transform: translateY(-50%);
}
</style>
